<template>
    <div class="login-box">
        <div class="list-item">
            <p>
                <img :src="phone_icon" alt=""><input type="number" placeholder="请输入手机号" v-model="forgetData.phone">
            </p>

        </div>
        <div class="list-item">
            <p>
                <img :src="code_icon" alt=""><input type="number" placeholder="请输入验证码" v-model="forgetData.yzm">
            </p>
            <p class="code" :class="sendAuthCode?'':'active'" @click="getAuthCode">{{auth_time}}</p>
        </div>
        <div class="list-item">
            <p>
                <img :src="pwd_icon" alt=""><input type="password" placeholder="请输入密码" v-model="forgetData.password">
            </p>

        </div>
        <div class="list-item">
            <p>
                <img :src="pwd_icon" alt=""><input type="password" placeholder="请确认密码" v-model="forgetData.repassword">
            </p>

        </div>


        <p class="login-btn" @click="ForgetPwd">确认</p>

    </div>
</template>

<script>
    import phone from '@/assets/img/icon_phone.png'
    import code from '@/assets/img/icon_yzm.png'
    import pwd from '@/assets/img/icon_password.png'
    export default {
        name: "ForgetPwd",
        data(){
            return {
                phone_icon:phone,
                code_icon:code,
                pwd_icon:pwd,
                forgetData:{
                    phone:'',
                    password:'',
                    yzm:'',
                    repassword:''
                },
                sendAuthCode:true,
                auth_time:'获取验证码'
            }
        },
        methods:{
            ForgetPwd(){
                this.$api.login.ForgetPwd(this.forgetData).then(res=> {
                    // 执行某些操作
                    if(res.data.code === 1){
                        this.$toast({
                            message: res.data.msg,
                            duration: 1000,
                            forbidClick: true
                        })
                        this.$router.push("/login")
                    }else{
                        this.$toast({
                            message: res.data.msg,
                            duration: 1000,
                            forbidClick: true
                        })
                    }
                })
            },
            getAuthCode:function () {
                this.$api.login.ForgetYzm(this.forgetData.phone).then(res=> {
                    // 执行某些操作
                    this.$toast({
                        message: res.data.msg,
                        duration: 1000,
                        forbidClick: true
                    })
                    if(res.data.code === 1){
                        this.sendAuthCode = false;
                        this.auth_time = 60;
                        var auth_timetimer =  setInterval(()=>{
                            this.auth_time--;
                            if(this.auth_time<=0){
                                this.sendAuthCode = true;
                                this.auth_time = '获取验证码'
                                clearInterval(auth_timetimer);
                            }
                        }, 1000);
                    }


                })


            }
        }
    }
</script>

<style scoped>
    .login-box{
        padding: 0 2rem;
    }
    .list-item{
        padding: 0 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 4rem;
        border-bottom: 1px solid #eee;
    }
    .list-item img{
        width: 1rem;
        margin-right: 0.5rem;
    }
    .list-item p{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .list-item input{
        border:none;
        outline: none;
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color: #333;
    }
    .yqm{
        width: 15rem;
    }
    .list-item input:placeholder{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color: #999;
    }
    .code{
        width:5rem;
        height:1.75rem;
        background:rgba(230,230,230,1);
        border-radius:1rem;
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
        display: flex;
        align-items: center;
        justify-content: center!important;
    }
    .code.active{
        width:5rem;
        height:1.75rem;
        background:rgba(20,163,101,1);
        border-radius:1rem;
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
    .to-other{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .to-re{
        color: #14a365;
    }
    .login-btn{
        width:20.63rem;
        height:2.75rem;
        background:rgba(20,163,101,1);
        border-radius:1rem;
        margin: 4rem auto 5rem auto;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:1.06rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
    .wx-login{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 1rem;
    }
    .wx-login p{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .wx-login p span{
        width: 100%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(102,102,102,1);

    }
    .wx-login p span img{
        width: 2.5rem;
        margin-bottom: 0.5rem;
    }
</style>